import React, { useContext, useEffect, useState } from "react"
import { getInterViewList } from "@/services/index"
import { ISkillLabel, ISkillList, IInterViewQuery } from "@/utils"
// import '../interviewList.less'
import { Table, Input ,Breadcrumb} from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import stylesInterviewList from "./interviewList.less"
import { observer } from "mobx-react-lite"
import storeContext from "@/context/storeContext";

const arr = ['不确定', "通过", "未通过",]

const columns = [
    {
        title: '岗位名称',
        dataIndex: 'stationName',
        align:"center"
    },
    {
        title: '公司名称',
        dataIndex: 'companyName',
        align:"center"
    },
    {
        title: '面试时间',
        dataIndex: 'interviewTime',
        align:"center"
    },
    {
        title: '面试官',
        dataIndex: 'intervierManagement',
        align:"center"
    },
    {
        title: '专业',
        dataIndex: 'majorName',
        align:"center"
    },
    {
        title: '提交人',
        dataIndex: 'commitName',
        align:"center"
    },
    {
        title: '面试结果',
        dataIndex: 'status',
        align:"center",
        render: (status: ISkillList) => {
            if (Number(status) == 0) {
                return <span>不确定</span>
            } else if (Number(status) == 1) {
                return <span style={{ color: "#29cb97" }}>通过</span>
            } else if (Number(status) == 2) {
                return <span style={{ color: "#29cb97" }}>未通过</span>
            }
        }
    },
    {
        title: '录音文件',
        dataIndex: 'issoundrecord',
        align:"center",
        render: (issoundrecord: ISkillList) => {
            if (Number(issoundrecord) == 0) {
                return <span>无</span>
            } else if (Number(issoundrecord) == 1) {
                return <span>有</span>
            }
        }
    }
];

const interviewList: React.FC = props => {
    let [skillLabel, setSkillLabel] = useState<ISkillLabel[]>([])
    let [subs, setSubs] = useState('')
    let [sub, setSub] = useState()
    let [queryParams, setQueryParams] = useState<IInterViewQuery>({ isAsc: 'desc', searchTitle: '', pageNum: 1, pageSize: 10, isMyInfo: false } as IInterViewQuery)
    let [skillList, setSkillList] = useState<ISkillList[]>()
    let [isMyInfo, setMyInfo] = useState(false);
    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');

    let { skill } = useContext(storeContext)

    // 发送请求
    useEffect(() => {
        skill.getSkillLabel()
    }, [])

    // 列表
    useEffect(() => {
        if (sub) {
            queryParams = { ...queryParams, majorId: subs, status: sub, isMyInfo, searchTitle: title }
        } else {
            queryParams = { ...queryParams, majorId: subs, status: "" as unknown as number, isMyInfo, searchTitle: title }
        }
        getInterViewList(queryParams).then(ok => {
            if (ok.code == 200) {
                setSkillList(ok.rows)
            }
        })
    }, [subs, sub, isMyInfo, title])



    return <div className={stylesInterviewList.studentPostSkill}>
        <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
            <Breadcrumb.Item>面试</Breadcrumb.Item>
            <Breadcrumb.Item>面试记录</Breadcrumb.Item>
        </Breadcrumb>
        <div className={stylesInterviewList.headers}>
            <div className={stylesInterviewList.header1}>
                <div className={stylesInterviewList.header_left1}>专业：</div>
                <div className={stylesInterviewList.header_right}>
                    <span className={subs == '' ? stylesInterviewList.active : ''} onClick={() => { setSubs('') }}>全部</span>
                    {
                        skill.skillLabel.map((item, index) => <span className={item.id == subs ? stylesInterviewList.active : ''} onClick={(e) => { setSubs(item.id) }} key={index}>{item.name}</span>)
                    }
                </div>
            </div>

            <div className={stylesInterviewList.header2}>
                <div className={stylesInterviewList.header_left2}>状态：</div>
                <div className={stylesInterviewList.header_right}>
                    <span className={sub == undefined ? stylesInterviewList.active : ''} onClick={() => { setSub(undefined) }}>全部</span>
                    {
                        arr.map((item, index) => <span className={index == sub ? stylesInterviewList.act : ''} onClick={(e) => { setSub(index as any) }} key={item}>{item}</span>)
                    }
                </div>
            </div>
        </div>

        <div className={stylesInterviewList.main}>
            <div className={stylesInterviewList.nav}>
                <div></div>
                <span className={stylesInterviewList.spans}> <Input placeholder="搜索岗位,公司名称" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                    if (e.keyCode === 13) {
                        setSearchTitle(title)
                    }
                }} /></span>
            </div>

            <Table style={{ width: "95%", margin: "0 auto", textAlign: "center" }} rowKey='interviewId' dataSource={skillList} columns={columns} />
        </div>


    </div>
}

export default observer(interviewList)